<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - HouseHold</title>
    <link th:href="@{/assets/css/bootstrap.min.css}" href="../static/assets/css/bootstrap.min.css" rel="stylesheet">
    <link th:href="@{/assets/css/login.css}" href="../static/assets/css/.css" rel="stylesheet">
</head>
<body>

<div class="container">
    <div class="row" style="z-index:1000">
        <div class="col-md-4  col-lg-5" >
        </div>
        <div class="col-md-8 col-sm-12 col-lg-7 col-xs-12 left" >
            <div class="main">
                <div class="mt10 pull-right">
                    <a href="/register"><i class="glyphicon glyphicon-forward"></i>立即注册</a>
                </div>
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active"><a href="#namePW" data-toggle="tab">用户名登陆</a></li>
                    <li><a href="#phone" data-toggle="tab">短信验证登录</a></li>
                    <li class="dropdown"> <a href="#face" data-toggle="tab">人脸登录</a> </li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="namePW">
                        <form role="form" th:action="@{/dologin}" method="post">
                            <div class="form-group">
                                <label for="name">用户名</label>
                                <input type="text" class="form-control" id="name" name="uname" placeholder="请输入用户名">
                            </div>
                            <div class="form-group">
                                <label for="passwd">密码</label>
                                <input type="password" class="form-control" id="passwd" name="passwd" placeholder="请输入密码">
                            </div>
                            <div class="form-group">
                                <div>
                                    <label for="verifyCode">验证码</label>
                                </div>
                                <div class="row" >
                                    <div class="col-md-6 col-sm-12 col-lg-6 col-xs-12" >
                                        <input type="text" class="form-control" name="kaptcha" id="verifyCode" placeholder="请输入验证码">
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-lg-6 col-xs-12 ">
                                        <img th:src="@{/vg.jpg}" title="看不清，请点我" onclick="refresh(this)" onmouseover="mouseover(this)" >
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="checkbox">
                                    <input type="checkbox" name="remember-me" checked> 自动登录
                                </div>
                            </div>
                            <button type="submit" class="btn btn-success btn-lg btn-block">登录</button>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="phone">
                        <form role="form" action="/auth/mobile-login" method="post">
                            <div class="form-group">
                                <label for="inputTel">手机号</label>
                                <input type="text" class="form-control" id="inputTel" name="mobile" placeholder="请输入手机号">
                            </div>
                            <div class="form-group">
                                <label for="telCode">验证码</label>
                                <div class="row" >
                                    <div class="col-md-6 col-sm-12 col-lg-6 col-xs-12 " >
                                        <input type="text" class="form-control" id="telCode" name="smsCode" placeholder="请输入验证码">
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-lg-6 col-xs-12 telCode">
                                        <button type="button" class="btn btn-info" id="getTelCode"  >获取验证码</button>
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-success btn-lg btn-block" id="submit2">登录</button>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="face">
                        <div class="capture">
                            <video id="video" autoplay></video>
                            <canvas id="canvas" width="480" height="320" style="display: none;"></canvas>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<input type="hidden" id="messageInfo" th:value="${message}">

<script th:src="@{/assets/js/http.js}" src="../static/assets/js/http.js"></script>
<script th:src="@{/assets/js/express.js}" src="../static/assets/js/express.js"></script>
<script th:src="@{/assets/js/jquery.min.js}" src="../static/assets/js/jquery.min.js"></script>
<script th:src="@{/assets/layer/layer.js}" src="../static/assets/layer/layer.js"></script>
<script th:src="@{/assets/js/bootstrap.min.js}" src="../static/assets/js/bootstrap.min.js"></script>
<script>

    $(function () {
        let text=$("#messageInfo").val();
        if (text!=null&&text!=''){
            layer.msg(text,{icon:2});
            $("#messageInfo").val('');
        }
    })
    function refresh(obj) {
        obj.src="/vg.jpg";
    }
    function mouseover(obj) { obj.style.cursor = "pointer"; }
</script>

</body>
</html>